<template>
  <dialog ref="dialogRef" class="modal" @close="close">
    <div class="modal-box max-w-[90vw] h-[90vh] flex flex-col">
      <form method="dialog">
        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
          ✕
        </button>
      </form>

      <div class="flex items-center mb-4">
        <div
          class="w-10 h-10 rounded-lg bg-[#eff6ff] flex items-center justify-center mr-3"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="#3b82f6"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
            <path d="M22 12A10 10 0 0 0 12 2v10z"></path>
          </svg>
        </div>
        <h3 class="text-lg font-bold">数据分析</h3>
      </div>

      <div class="custom-tabs-container mb-4">
        <div class="custom-tabs-nav">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            class="custom-tab"
            :class="{ 'custom-tab-active': activeTab === index }"
            @click="activeTab = index"
          >
            {{ tab.title }}
            <div
              class="custom-tab-divider"
              v-if="index < tabs.length - 1"
            ></div>
          </div>
        </div>
      </div>

      <div class="flex-1 h-0 overflow-hidden">
        <!-- 企业基本信息 -->
        <div
          v-if="activeTab === 0"
          class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg"
        >
          <div class="space-y-4">
            <div class="font-medium text-[16px] mb-2">公司信息</div>
            <a-descriptions
              :data="companyInfo"
              layout="horizontal"
              :column="1"
              class="bg-white p-4 rounded-lg shadow-sm"
              :label-style="{
                'text-align': 'left',
                'font-weight': '500',
                color: '#5e6c84',
              }"
            />

            <div class="font-medium text-[16px] mt-5 mb-2">主营业务</div>
            <div class="bg-white p-4 rounded-lg shadow-sm text-[#5e6c84]">
              {{ companyBusiness }}
            </div>

            <div class="font-medium text-[16px] mt-5 mb-2">产品与服务</div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                v-for="(item, index) in productServices"
                :key="index"
                class="bg-white p-4 rounded-lg shadow-sm"
              >
                <div class="font-medium mb-2">{{ item.title }}</div>
                <div class="text-[#5e6c84]">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 行业分析 -->
        <div
          v-if="activeTab === 1"
          class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg"
        >
          <div class="space-y-4">
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <div class="flex items-center mb-3">
                <div class="w-6 h-6 rounded-full mr-2 bg-[#eff6ff]">
                  <div class="w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="#3b82f6"
                      stroke-width="2.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                      <path d="M2 17l10 5 10-5"></path>
                      <path d="M2 12l10 5 10-5"></path>
                    </svg>
                  </div>
                </div>
                <span class="font-medium">{{ industryAnalysis.title }}</span>
              </div>
              <div class="pl-4 mt-2 text-[#5e6c84]">
                {{ industryAnalysis.content }}
              </div>
            </div>
          </div>
        </div>

        <!-- 竞争力评估 -->
        <div
          v-if="activeTab === 2"
          class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg"
        >
          <div class="space-y-4">
            <div
              v-for="(item, index) in competitiveness"
              :key="index"
              class="bg-white p-4 rounded-lg shadow-sm"
            >
              <div class="flex items-center mb-3">
                <div
                  class="w-6 h-6 rounded-full mr-2"
                  :style="`background-color: ${item.bgColor}`"
                >
                  <div class="w-full h-full flex items-center justify-center">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      :stroke="item.iconColor"
                      stroke-width="2.5"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    >
                      <component :is="item.icon" />
                    </svg>
                  </div>
                </div>
                <span class="font-medium">{{ item.title }}</span>
              </div>
              <div class="space-y-2">
                <div
                  v-for="(point, pointIdx) in item.points"
                  :key="pointIdx"
                  class="pl-4 border-l-2 text-[#5e6c84]"
                  :style="`border-color: ${item.borderColor}`"
                >
                  {{ point }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 政策与风险 -->
        <div
          v-if="activeTab === 3"
          class="p-4 overflow-auto h-full bg-[#f8f9fc] rounded-lg"
        >
          <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="bg-white p-4 rounded-lg shadow-sm">
                <div class="flex items-center mb-3">
                  <div class="w-6 h-6 rounded-full mr-2 bg-[#f5f3ff]">
                    <div class="w-full h-full flex items-center justify-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#8b5cf6"
                        stroke-width="2.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path
                          d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"
                        ></path>
                        <path d="M14 2v6h6"></path>
                        <path d="M16 13H8"></path>
                        <path d="M16 17H8"></path>
                        <path d="M10 9H8"></path>
                      </svg>
                    </div>
                  </div>
                  <span class="font-medium">政策支持</span>
                </div>
                <div class="space-y-2 mt-2">
                  <div
                    v-for="(item, index) in policies"
                    :key="index"
                    class="pl-4 border-l-2 border-[#8b5cf6] text-[#5e6c84]"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>

              <div class="bg-white p-4 rounded-lg shadow-sm">
                <div class="flex items-center mb-3">
                  <div class="w-6 h-6 rounded-full mr-2 bg-[#fff7ed]">
                    <div class="w-full h-full flex items-center justify-center">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#f97316"
                        stroke-width="2.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        <path
                          d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
                        ></path>
                        <path d="M12 9v4"></path>
                        <path d="M12 17h.01"></path>
                      </svg>
                    </div>
                  </div>
                  <span class="font-medium">风险提示</span>
                </div>
                <div class="space-y-2 mt-2">
                  <div
                    v-for="(item, index) in risks"
                    :key="index"
                    class="pl-4 border-l-2 border-[#f97316] text-[#5e6c84]"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <form method="dialog" class="modal-backdrop">
      <button>close</button>
    </form>
  </dialog>
</template>
  
<script setup>
import { ref, h } from "vue";

const dialogRef = ref(null);
const emit = defineEmits(["close"]);
const activeTab = ref(0);

// 标签页数据
const tabs = [
  { title: "企业基本信息" },
  { title: "行业分析" },
  { title: "竞争力评估" },
  { title: "政策与风险" },
];

// 企业基本信息
const companyInfo = [
  { label: "公司名称", value: "贵州锆石科技发展有限责任公司" },
  { label: "所在地", value: "综保区（经度：106.616341，纬度：26.626713）" },
  { label: "主要产业", value: "航空航天装备" },
  { label: "子行业", value: "有色金属冶炼及压延产品/十种有色金属" },
  { label: "企业类型", value: "锻件&铸件，起落架系统" },
];

const companyBusiness =
  "专注于航空航天装备领域，特别是金属锻件和无人机起落架的生产。";

// 产品与服务
const productServices = [
  {
    title: "金属锻件",
    content: "广泛应用于航空航天领域的关键部件",
  },
  {
    title: "无人机起落架",
    content: "为无人机提供可靠的着陆和起飞支撑",
  },
];

// 图标组件定义
const checkIcon = {
  render: () => h("path", { d: "M20 6L9 17l-5-5" }),
};

const alertIcon = {
  render: () =>
    h("path", {
      d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01",
    }),
};

const layersIcon = {
  render: () => [
    h("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
    h("path", { d: "M2 17l10 5 10-5" }),
    h("path", { d: "M2 12l10 5 10-5" }),
  ],
};

const awardIcon = {
  render: () => [
    h("circle", { cx: "12", cy: "8", r: "6" }),
    h("path", { d: "M15.477 12.89 17 22l-5-3-5 3 1.523-9.11" }),
  ],
};

// 竞争力评估
const competitiveness = [
  {
    title: "企业优势",
    points: [
      "技术优势：公司在金属锻件和无人机起落架方面拥有先进的制造技术和丰富的经验",
      "品牌优势：作为国内少数几家能够提供高质量航空航天装备的企业之一，在市场上具有较高的知名度和信誉",
      "政策支持：受益于国家对航空航天产业的支持政策，公司在技术研发和市场拓展方面获得了有力的支持",
      "成本控制：通过优化生产工艺和供应链管理，公司能够有效控制生产成本，提高竞争力",
    ],
    bgColor: "#e6fcf5",
    iconColor: "#10b981",
    borderColor: "#10b981",
    icon: checkIcon,
  },
  {
    title: "行业地位",
    points: [
      "在国内航空航天装备制造业中，凭借其在金属锻件和无人机起落架方面的专业能力，处于较为领先的地位",
      "竞争优势：技术创新能力强，产品质量高，客户认可度高",
      "竞争劣势：与国际巨头相比，在全球市场的影响力和市场份额仍有提升空间",
    ],
    bgColor: "#eff6ff",
    iconColor: "#3b82f6",
    borderColor: "#3b82f6",
    icon: awardIcon,
  },
];

// 行业分析
const industryAnalysis = {
  title: "航空航天装备行业分析",
  content:
    "近年来，随着中国航空航天产业的快速发展，贵州锆石科技在市场需求的推动下，实现了稳定的增长。航空航天装备作为国家战略性新兴产业，得到国家政策的大力支持，市场前景广阔。",
};

// 政策支持
const policies = [
  "税收优惠：综保区内的企业通常享受一定的税收优惠政策，有助于降低运营成本",
  "产业补贴：当地政府可能针对航空航天装备企业提供研发和创新方面的资金支持",
  "环保政策：严格的环保要求可能增加公司的合规成本，但同时也促进了绿色制造技术的发展",
];

// 风险提示
const risks = [
  "市场竞争：尽管公司在行业内具有一定优势，但面对国内外竞争对手的压力，仍需不断提升技术水平和服务质量",
  "政策法规：航空航天产业受国家政策影响较大，任何政策变动都可能对公司经营产生影响",
  "供应链风险：原材料价格波动和供应链中断可能会对公司生产造成不利影响",
];

const open = () => {
  dialogRef.value.showModal();
};

const close = () => {
  dialogRef.value.close();
  emit("close");
};

defineExpose({
  open,
});
</script>
  
<style scoped>
.custom-tabs-container {
  width: 100%;
  position: relative;
}

.custom-tabs-nav {
  display: flex;
  position: relative;
  border-bottom: 1px solid #e5e7eb;
}

.custom-tab {
  position: relative;
  padding: 12px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #5e6c84;
  display: flex;
  align-items: center;
}

.custom-tab-active {
  color: #4455f2;
  font-weight: 500;
}

.custom-tab-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #4455f2;
}

.custom-tab-divider {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #e5e7eb;
}
</style>
  